<template>
  <!-- 左侧导航栏 -->
  <div class="leftNav">
    <!-- 滚动区域 插件 -->
    <scroller class="scrollerBox">
      <ul class="list" id="list">
        <li
          v-for="(item, index) in $parent.$parent.$parent.infoList"
          :key="index"
          @click="rigthShow(index)"
          :fa-showrigth="faShowrigth"
          ref="liEle"
          oneLiele
          :class="{ bgc: isShow === index }"
        >
          {{ item.name }}
        </li>
      </ul>
    </scroller>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: 0,
    };
  },
  props: ["faShowrigth"],
  methods: {
    // 左侧tab栏目切换
    rigthShow(val) {
      this.isShow = val;

      // 向父组件传值
      this.$parent.$parent.$parent.faShowRigth(this.isShow);
    },
    // 插件数据
    refresh(done) {
      setTimeout(() => {
        let start = this.top - 1;
        for (let i = start; i > start - 10; i--) {
          this.items.splice(0, 0, i + " - keep walking, be 2 with you.");
        }
        this.top = this.top - 10;
        done();
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
.leftNav {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;

  .scrollerBox {
    height: 100% !important;
    overflow: hidden;
  }

  .list {
    width: 100%;
    height: calc(100% - 56px);
    background-color: #f8f8f8;
    li {
      width: 100%;
      height: 50px;
      font-size: 15px;
      text-align: center;
      line-height: 50px;
    }
    .bgc {
      background-color: #fff;
      color: #f63515;
    }
  }
}
</style>
